<template>
  <div class="personalLize">
    <div class="innerCon">
      <hotKey></hotKey>
      <SetItem title="快捷图标开关键" toolText="设置方法：按住Control或alt或shift+任一按键组合">
        <template #pro>
          <el-input size="small" readonly v-model="hotKey" @keydown="keydown" @keyup="keyup" @focus="focus"></el-input>
        </template>
      </SetItem>
      <SetItem title="快捷图标">
        <template #pro>
          <el-switch
            v-model="showIconFlag"
            @change="changeStopIcon"
            active-color="#409eff"
            inactive-color="#ff4949"
            active-text="开启"
            inactive-text="关闭"
            >
          </el-switch>
          <!-- <el-select v-model="stopIcon" class="m-2" placeholder="暂停时长" size="small" placement="left"
            @change="changeStopTime">
            <el-option v-for="item in stopTime" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
        </template>
      </SetItem>
      <SetItem title="快捷图标设置">
        <template #pro>
          <el-select v-model="maxPropmptNum" class="m-2" placeholder="快捷图标设置" size="small" placement="left"
            @change="confirm">
            <el-option v-for="item in numListRef" :key="item" :label="item" :value="item" />
          </el-select>
        </template>
      </SetItem>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import SetItem from "./setItem.vue";
import hotKey from "./hotKey.vue";
import { isElectron, getSimilarName } from "@/utils";
import { useRouter } from "vue-router";
import { Propmpt } from "@/types";

const router = useRouter();
export default defineComponent({
  name: "",
  components: {
    SetItem,
    hotKey
  },
  setup() {
    if (!isElectron()) return
    const keyLimits = ['Control+w','Control+W','Control+f','Control+F','Control+c', 'Control+C', 'Control+v', 'Control+V', 'Control+x', 'Control+X']
    const { ipcRenderer } = require("electron");
    const isTop = ref(false);
    const showIconFlag = ref(true);
    const openPersonal = ref(false);
    const stopIcon = ref(0);
    const hotKeyStr = "Ctrl+Alt+Space"
    const hotKey = ref(hotKeyStr);
    localStorage.setItem("showIconKey", hotKeyStr);
    const hotKeyStack = new Set();
    const iconItemWith = 30;
    ipcRenderer.on("changeIconToggle", (_: any, data: any) => {
      showIconFlag.value = data.value;
    });

    const maxPropmptNum = ref(8);
    let confirmPropmptNum = maxPropmptNum.value;
    let allPropmpts = JSON.parse(localStorage.getItem("propmpts") || "null");
    const allPropmptsRef = ref<Propmpt[]>(allPropmpts);
    const numList = [];
    for (let i = 5; i <= allPropmptsRef.value.length; i++) {
      numList.push(i)
    }
    const numListRef = ref(numList);
    const stopTime = [
      {
        value: 0,
        label: "无",
      },
      {
        value: 5 * 1000,
        label: "五秒",
      },
      {
        value: 60 * 10 * 1000,
        label: "十分钟",
      },
      {
        value: 60 * 30 * 1000,
        label: "半小时",
      },
      {
        value: 60 * 60 * 1000,
        label: "一小时",
      },
    ];
    function chanShortKey() {
      ipcRenderer.invoke("openShortKey");
    }
    function changeStopTime() {
      ipcRenderer.invoke("stopIcon", stopIcon.value);
    }

    function changeStopIcon() {
       ipcRenderer.invoke("stopIcon", showIconFlag.value);
    }
    function keydown(e: KeyboardEvent) {
      switch (e.key) {
        case " ":
          hotKeyStack.add("Space");
          break;
        case "Backspace":
          hotKeyStack.clear();
          hotKey.value = "";
          break;
        default:
          hotKeyStack.add(e.key);
          break;
      }
      setHotKey();
    }
    function setHotKey() {
      const firstElement = hotKeyStack.values().next().value;
      if (
        firstElement === "Control" ||
        firstElement === "Alt" ||
        firstElement === "Shift"
      ) {
        if (hotKeyStack.size > 1 && hotKeyStack.size < 4) {
          if (
            hotKeyStack.size === 2 &&
            hotKeyStack.has("Control") &&
            hotKeyStack.has("Alt")
          ) {
            return;
          }
          const kvalue = [...hotKeyStack].join("+");

          if (keyLimits.includes(kvalue)) {
            const { BrowserWindow } = require('@electron/remote')
            const { dialog } = require('@electron/remote')
            dialog.showMessageBox({
              type: "error",//图标类型
              title: "注意",//信息提示框标题
              message: "您无法设置该按键",//信息提示框内容
              buttons: ["确认"],//下方显示的按钮
              icon: 'none',//图标
              cancelId: 2//点击x号关闭返回值
            }, function (index: any) {

            })
            return
          } else {
            hotKey.value = kvalue
          }
          const oldKey = localStorage.getItem("showIconKey") || "null";
          ipcRenderer.invoke("setHotKey", { newKey: hotKey.value, oldKey});
          setTimeout(()=>{
            localStorage.setItem("showIconKey", hotKey.value);
          },200)
        }
      } else {
        hotKeyStack.clear();
      }
    }
    function focus() {
      hotKeyStack.clear();
    }
    function keyup(e: KeyboardEvent) {
      hotKeyStack.delete(e.key);
    }

    const confirm = async () => {
      confirmPropmptNum = maxPropmptNum.value;
      setIconNum();
    };

    const setIconNum = async () => {
      await ipcRenderer.invoke("setPropmpt", {
          width: (confirmPropmptNum + 1) * iconItemWith,
          height: 100,
          value: confirmPropmptNum
      });
    };

    return {
      maxPropmptNum,
      allPropmptsRef,
      openPersonal,
      chanShortKey,
      stopIcon,
      stopTime,
      changeStopTime,
      hotKey,
      keydown,
      keyup,
      focus,
      isTop,
      numListRef,
      showIconFlag,
      changeStopIcon,
      confirm
    };
  },
});
</script>
<style scoped lang="scss"></style>
<style lang="scss">
.personalLize {

  .innerCon {
    padding: 20px;
    padding-top: 0;
  }

  .el-input--small {
    width: 120px;
    height: 34px;
  }

  .el-select {
    width: 120px;
  }
}
</style>
